<template>
	<div class="shangpin" >
			<img :src="goods.small_image" alt="图片" @click="product(goods)">
			<h3>{{goods.name}}</h3>
			<del>{{goods.origin_price | priceFilter}}</del>
			<div>
				<span>{{goods.price | priceFilter}}</span>
				<div @click="add(goods)">
					<van-icon name="cart-o" />
				</div>
			</div>
	</div>
</template>

<script>
	import {addCartApi} from '@/api'
	import {mapMutations,mapState} from 'vuex'
	export default {
		name:'shangpin',
		props:["goods"],
		created(){
			// console.log(this.goods)
		},
		computed:{
			...mapState(['isDenglu']),
		},
		methods:{
			...mapMutations(["addgoods"]),
			async add(goods){
				let {id:goods_id,name:goods_name,price:goods_price,small_image} = goods
				let {token:user_id} = this.isDenglu
				// 拿到数据将其结构给新对象，使新对象用其作为自己的参数发送ajax并返回一个res对象，证明已经添加到服务器中成功，然后res返回的对象中有这些商品的信息，再将商品的信息给同步到本地
				let goodss = {goods_id, goods_name, goods_price, small_image, user_id}
				let res = await addCartApi(goodss)
				console.log(res);
				// console.log(res)
				//将商品信息同步到本地
				this.addgoods(res.data.data)
			},
			product(goods){
				this.$router.push({name:"product",query:{goods}})
			}
			
		}
	}
</script>

<style scoped lang="less">
	.shangpin{
		height: 200px;
			box-sizing: border-box;
			padding: 10px 5px 0 5px;
			// width: 115px;
			font-size: 14px;
			img{
				max-width: 100%;
			}
			h3{
				font-size: 14px;
				padding: 0;
				margin: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			del{
				color: #999;
				display: block;
			}
			div{
				display: flex;
				justify-content: space-between;
				span{
					color: #fe6263;
					line-height: 30px;
				}
				div{
					width: 30px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #3eb965;
					border-radius: 15px;
				}
			}
			
	}
</style>